<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta name="page-view-size" content="1280*720" />
    <link rel="stylesheet" href="style/base.css" />
    <title>首页</title>
    <style>
      body {
        position: absolute;
        margin: 0;
        padding: 0;
        width: 1280px;
        height: 720px;
        /* background-image: url(./images/bg.png); */
        background-repeat: no-repeat;
        background-color: transparent;
        overflow: hidden;
      }
      #header {
        height: 50px;
        padding: 20px 50px;
      }
      #marquee {
        position: absolute;
        top: 22px;
        left: 50%;
        margin-left: -300px;
        height: 50px;
        line-height: 50px;
        width: 530px;
        border-radius: 15px;
        overflow: hidden;
        color: #fff;
        font-size: 18px;
      }
      #marquee .marquee_item {
        background: url(./images/marquee_bg.png) repeat;
        padding: 0 20px;
      }
      #btn {
        color: #fff;
        font-size: 18px;
        position: absolute;
        right: 50px;
      }

      #btn-0 {
        right: 155px;
        background-color: #36b3ff;
        right: 165px;
      }

      #btn-1 {
        right: 0;
        background-color: #ffa34f;
      }

      #btn .item {
        position: absolute;
        width: 135px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        border-radius: 25px;
        overflow: hidden;
      }

      #btn .btn.focus {
        border: none !important;
      }
      #more-scroll {
        position: relative;
      }
      #recommend {
        position: absolute;
        top: 20px;
        left: 50px;
      }
      #recommend .item {
        position: absolute;
        overflow: hidden;
      }
      #recommend #recommend-0 {
        width: 495px;
        height: 270px;
      }

      #recommend-1,
      #recommend-2,
      #recommend-3 {
        width: 197px;
        height: 270px;
      }
      #recommend-4,
      #recommend-5,
      #recommend-6,
      #recommend-7 {
        top: 300px;
        width: 272px;
        height: 142px;
      }
      #recommend-1 {
        left: 525px;
      }
      #recommend-2 {
        left: 752px;
      }
      #recommend-3 {
        left: 979px;
      }
      #recommend-4 {
        left: 0;
      }
      #recommend-5 {
        left: 302px;
      }
      #recommend-6 {
        left: 604px;
      }
      #recommend-7 {
        left: 906px;
      }
      #classify {
        position: absolute;
        top: 492px;
        left: 50px;
      }
      #classify .item {
        position: absolute;
        width: 176px;
        height: 120px;
      }
      #more {
        position: absolute;
        top: 700px;
        left: 0;
        right: 0;
      }
      #more .title {
        position: absolute;
        top: -50px;
      }
      #more .title img {
        height: 36px;
        width: auto;
        margin-left: 50px;
      }

      #more .item {
        position: absolute;
      }

      .more-item {
        position: absolute;
      }
    </style>
  </head>
  <body onload="init()" onunload="exit()">
  <!-- 只有移动才有 -->
    <iframe name="if_smallscreen" style="position:absolute;width:0px;height:0px;z-index: 1;" id="iframe" src="" iframeborder="no" scrolling="no"></iframe>
     <!-- 只有移动才有 -->
	<div id="main">
	<!--联通不要 -->
	<div class='smallResolution' id="smallResolution"></div>
	<!--联通不要 -->
      <div id="header" class="oh">
        <div id="logo"></div>
        <div id="btn"></div>
        <div id="marquee"></div>
      </div>

      <div id="more-container">
        <div id="more-scroll">
          <div id="recommend"></div>
          <div id="classify"></div>
          <div id="more"></div>
        </div>
      </div>
      <div id="volume">
        <div class="volume-container">
          <div id="volume-bar"></div>
        </div>
        <img src="images/controls/volum.png" alt="">
      </div>
      
      <div id="test"></div>
    </div>
    <!-- <img 
        style="position: fixed;width: 300px;height: 300px;z-index: 1000;" 
        src="http://192.168.129.130:10117/third/thirdpart/qrcode/acbind?appkey=050ec6cc582c08f4ab8b2f873fdc818a&param=YD_HW_gdcszs0124_goods00001_0=14" alt="图片显示错误"> -->
  </body>

  <script src="js/jquery.js"></script>
  <script src="config/index.js"></script>
  <script src="api/index.js"></script>
  <script src="js/utlis.js"></script>
  <script src="js/KeyEnter.js"></script>
  <script src="js/event.js"></script>
  <script src="js/move.js"></script>
  <script src="js/log.js"></script>
  <script src="js/page.js"></script>

  <script src="components/logo.js"></script>
  <script src="components/dialog.js"></script>
  <script src="components/home/marquee.js"></script>
  <script src="components/home/btn.js"></script>
  <script src="components/home/recommend.js"></script>
  <script src="components/home/classify.js"></script>
  <script src="components/home/more.js"></script>
  <script src="components/series.js"></script>
  <!-- <script src="components/sitcom.js"></script> -->
  <script src="components/video.js"></script>
  <!-- 只有移动才有 -->
  <script src="js/sendLog.js"></script>
  <!-- 只有移动才有 -->
  <script>

    // function showImg() {
    //   var url = 'http://192.168.129.130:10117/third/thirdpart/qrcode/acbind'
    //   var appkey = '050ec6cc582c08f4ab8b2f873fdc818a'
    //   var param = 'RDEwMUFGNEUyQjQ3NDExQ0U5OUMxNzU5NzhCNEQ3ODE4N0U2N0NFMjQ0RjI1ODJGNURGMjAwQzBGRjNEQjU0MQ=='
    //   var zx = 14
    //   var style = "position: fixed;width: 300px;height: 300px;z-index: 1000;" 
    //   $('body').append('<img style="' + style + '" src="' + url + '?appkey=' + appkey + '&param=' +  param + '&zx=' + zx + '"/>')
    // }
    //showImg()
    // ok操作
    var hanlderEnter = {
      btn: function (data, id, index) {
        var form = config.path + '/index.html?elId=' + id
        var to
        switch (index) {
          case "0":
            utils.order()
            break
          case "1":
            to = config.path + "/person.html";
            page.addUrl(to, form)
            break
        }
      },
      goto: function (data, id, index) {
        $("#more-scroll").css("top", 0);
        utils.toggleClass($(".video"));
        scrollTop()
      },
      recommend: function (data, id) {
        if (!data) return
        log.commit({
          name: data.typeName,
          type1: 'click',
          type2: 'index',
          starttime: new Date().getTime()
        })
        if (!data.linkUrl) {
          var vods = getVodListByTypeId({TYPEID: data.typeId}).data
          if (vods.length == 0) {
            return dialog.show('当前推荐位未绑定节目，请联系管理员')
          } else {
            this.vod(vods[0], id)
          }
        } else {
          if (data.ctype == 4) {
            this.game(data, id)
          } else {
            this.column(data, id);
          }
        }
      },
      game: function (data, id) {
        var form = config.path + '/index.html?elId=' + id
        var params = ''
        var vods = getVodListByTypeId({TYPEID: data.typeId}).data
        if (vods.length == 0) {
          return dialog.show('当前推荐位未绑定节目，请联系管理员')
        } else {
          params = '?seriesId=' + vods[0].ID
        }
        var to = config.path + '/' + data.linkUrl + '.html' + params
        page.addUrl(to, form)
      },
      classify: function (data, id) {
        if (!data) return
        log.commit({
          name: data.typeName,
          type1: 'click',
          type2: 'index',
          starttime: new Date().getTime()
        })
        if (!data.linkUrl) {
          return dialog.show('当前分类未绑定跳转链接，请联系管理员')
        } else {
          this.column(data, id);
        }
      },
      more: function (data, id) {
        if (!data) return
        if (data.ID) {
          log.commit({
            name: data.name,
            type1: 'click',
            type2: 'index',
            starttime: new Date().getTime()
          })
          this.vod(data, id);
        } else {
          log.commit({
            name: data.typeName,
            type1: 'click',
            type2: 'index',
            starttime: new Date().getTime()
          })
          this.column(data, id);
        }
      },
      vod: function (data, id) {
        var form = config.path + '/index.html?elId=' + id
        var to = config.path + "/vod.html?seriesId=" + data.ID
        page.addUrl(to, form)
      },
      column: function (data, id) {
        var form = config.path + '/index.html?elId=' + id
        var name = escape(data.typeName)
        var url = data.linkUrl || 'vod';
        var params = "?typeId=" + data.typeId + "&typeName=" + name
        if (url === 'vod') {
          var vods = getVodListByTypeId({TYPEID: data.typeId}).data
          if (vods.length == 0) {
            return dialog.show('当前推荐位未绑定节目，请联系管理员')
          } else {
            params += '&seriesId=' + vods[0].ID
          }
        }
        var to = config.path + '/' + url + '.html' + params
        page.addUrl(to, form)
      },
      dialog: function () {
        var message = $('.dialog-container').html()
        if (page.backMessage == message) {
          page.goHome()
        } 
        dialog.hide()
      }
    };

    

    function scrollTop () {
      var $el = $("#more-scroll");
      var $focus = $(".focus");
      var id = $focus.attr("id");
      if (!id) return;
      var isMore = id.indexOf("more") > -1 ? true : false;
      id = id.substring(0, id.lastIndexOf("-"));
      if (id == "recommend" || id == "btn") {
        $("#main").removeClass("scroll")
        page.scroll = false
        $el.css({ top: 0 }, 100)
        if (video.isInit) {
          video.resume()
        } else {
          initVideo()
        }
      } else if (id == "classify") {
        $("#main").addClass("scroll")
        $el.css({ top: -300 }, 100)
        page.scroll = true
        if (video.isInit) {
          video.pause()
        }
      } else if (isMore) {
        $("#main").addClass("scroll")
        page.scroll = true
        $el.css(
          {
            top: -($("#" + id).position().top + $("#more").position().top - 160),
          },
          100
        )
        if (video.isInit) {
          video.pause()
        }
      }
    }

    function showTips (msg) {
      dialog.show('《' + msg +'》开发中，敬请期待...')
    }

    function initVideo () {
      video.init({
        left: 50,
        top: 110,
        abs_left: 46,
        abs_top: 110,
        width: 503,
        height: 270,
        seriesId: page.data.series[0].ID,
        el: '#recommend-0',
        type: 'live'
      })
    }

    function init() {
      page.init()
      getMore()
      renderComponents()
      getPreFocus()
      if (page.scroll) {
        initVideo()
      }
	  <!-- 只有移动才有 -->
      if(page.isSub != "0" ){
            sendLog(true,"init");
      }
	  <!-- 只有移动才有 -->
      
      log.commit({
        name: '熊猫部落页面',
        type1: 'browse',
        type2: 'index',
        starttime: new Date().getTime()
      })
    }
    /**
     *
     * 获取更多栏目 
     *
     */
    function getMore () {
      var data = getTreeByTypeId(config.typeids[1]).TYPEs
      var types = ['marquee', 'recommend', 'classify', 'more']
      for (var i = 0; i < data.length; i++) {
        if (i === 3) {
          var mores = data[i].subColumn
          page.data.more = {}
          for (var j = 0; j < mores.length; j++) {
            page.data.more['more-' + j] = mores[j]
          }
        } else {
          page.data[types[i]] = data[i].subColumn
        }
      }
    }

    function renderComponents () {
      recommend.init()
      series.init(page.data.recommend[0].typeId)
      
      classify.init()
      more.init()
      btn.init()

      marquee.init()
      renderBg()
      logo.init()
      dialog.render()
    }

    function renderBg () {
      try {
        var picture = page.data.bgs[1].typePicture[0].picPath3
        $("#main").css("background-image", "url(" + picture + ")");
      } catch (err) {
        console.log(err)
      }
    }

    function getPreFocus() {
      var elId = utils.getUrlParam("elId", "")
      var dom = document.getElementById(elId || "recommend-0")
      dom && utils.toggleClass(dom)
      scrollTop()
    }

    function keyUp() {
	<!-- 只有移动才有 -->
      if(page.isSub != "0"){
         sendLog();
       }
	   <!-- 只有移动才有 -->
      if (!dialog.visible) {
        var dom = move.up();
        if (dom) {
          utils.toggleClass(dom)
          scrollTop()
        }
      }
    }

    function keyDown() {
	<!-- 只有移动才有 -->
      if(page.isSub != "0"){
         sendLog();
       }
	   <!-- 只有移动才有 -->
      if (!dialog.visible) {
        var dom = move.down();
        if (dom) {
          utils.toggleClass(dom)
          scrollTop()
        }
      }
    }

    function keyLeft() {
	<!-- 只有移动才有 -->
      if(page.isSub != "0"){
         sendLog();
       }
	   <!-- 只有移动才有 -->
      if (!dialog.visible) {
        var dom = move.left();
        dom && utils.toggleClass(dom);
      }
    }

    function keyRight() {
	<!-- 只有移动才有 -->
      if(page.isSub != "0"){
         sendLog();
       }
	   <!-- 只有移动才有 -->
      if (!dialog.visible) {
        var dom = move.right();
        dom && utils.toggleClass(dom);
      }
    }

    function keyMute () {
      video.toggleMute()
    }

    function keyVolumeUp () {
      video.volumeUp()
    }

    function keyVolumeDown () {
      video.volumeDown()
    }

    function keyBack() {
      if (page.scroll) {
        hanlderEnter.goto()
      } else {
        if (dialog.visible) {
          dialog.hide()
        } else {
          dialog.show(page.backMessage, true)
          
        }
      }
    }

    function keyEnter() {
      var info = utils.getCurInfo()
      var type = info.type
      var index = info.index
      var id = info.id
      var data = null
      if (dialog.visible) {
        type = 'dialog'
      } else {
        if (type.indexOf('more') > -1) {
          data = page.data.more[type].subColumn[index] || null
          type  = 'more'
        } else {
          data  = page.data[type] ? page.data[type][index] : null
        }
      }
      // if (!data) return
      try {
        hanlderEnter[type](data, id, index)
      } catch (error) {
        console.log(error)
      }
    }

    function exit () {
      try {
        video.destroy()
      } catch (error) {
        
      }
    }
  </script>
</html>
